<template>
  <div class="application">
    <div class="flex jus_between">
      <div>好友通知</div>
      <el-icon><DeleteFilled /></el-icon>
    </div>
    <div
      class="item flex jus_between"
      v-for="item in list"
      :key="item.application_id"
    >
      <div class="flex items-center">
        <img class="img m_r_10" :src="item.that_avatar" alt="" />
        <div class="m_r_10 basecolor">{{ item.that_nickname }}</div>
        <div
          style="font-size: 14px; color: #fff; font-weight: 500"
          class="m_r_10"
        >
          <div v-if="item.application_state === 3">正在验证您的邀请</div>
          <div
            v-else-if="
              item.application_state == 1 ||
              item.application_state == 2 ||
              item.application_state == 4
            "
          >
            请求加为好友
          </div>
          <div v-else-if="item.application_state == 0">拒绝了你的好友邀请</div>
          <div v-else-if="item.application_state == 5">同意了你的好友邀请</div>
        </div>
        <div style="color: #f5f5f5; font-size: 12px">
          {{ item.create_time }}
        </div>
      </div>
      <div class="flex items-center text-1" style="color: #f5f5f5">
        <div v-if="item.application_state === 3">等待验证</div>
        <div v-else-if="item.application_state == 4">已拒绝</div>
        <div v-else-if="item.application_state == 2">已同意</div>
        <el-dropdown
          size="small"
          split-button
          type="primary"
          trigger="click"
          v-else-if="item.application_state == 1"
        >
          <div @click="getcommand('同意', item.that_id)">同意</div>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="getcommand('拒绝', item.that_id)"
                >拒绝</el-dropdown-item
              >
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
  </div>
</template>

<script>
import { approval, getFriendGroup, checkApplication } from '@/api/message'
import io from 'socket.io-client'
export default {
  props: {
    list: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      state: 1,
      groupid: 0
    }
  },
  mounted() {
    this.$emit('getlist')
    this.getgroup()
  },
  methods: {
    getgroup() {
      getFriendGroup({ UserId: localStorage.getItem('userId') }).then(res => {
        if (res.code === 200) {
          this.groupid = res.data[0].group_id
        }
      })
    },
    getcommand(val, id) {
      this.state = val === '同意' ? 1 : 0
      approval({
        UserId: localStorage.getItem('userId'),
        GroupId: this.groupid,
        state: this.state,
        ThatId: id
      }).then(res => {
        console.log(res);
        if (res.code === 200) {
          this.$emit('getlist')
          this.$emit('open')
          this.$message({
            message: '操作成功',
            type: 'success'
          })
          let socket = io('ws://localhost:8080')
          socket.emit('aaa', JSON.stringify({
            name: 'aaa',
            id: id,
            sendid: localStorage.getItem('userId'),
            sendname: '审批好友'
          }))
        }
      })
    }
  },
  beforeUnmount() {
    checkApplication({ UserId: localStorage.getItem('userId'), state: 0 })
  }
}
</script>

<style lang="scss" scoped>
.application {
  padding: 40px;
  .item {
    width: 100%;
    height: 75px;
    display: flex;
    background: #824f4f;
    border-radius: 10px;
    margin-top: 20px;
    padding: 0 30px;
  }
}
</style>